<template>
  <view class="agent-bg">
    <view class="content-card">
      <!-- 渐变身份卡 -->
      <view class="identity-card">
        <view class="identity-left">
          <view class="card-title">我的代理身份</view>
          <view class="card-level">一级</view>
        </view>
        <image class="identity-bg" src="/static/service-icon.png" />
      </view>
      <!-- 成员信息表格 -->
      <view class="members">
        <view class="table-head">
          <view class="th main">成员信息</view>
          <view class="th">今日抽成</view>
          <view class="th">昨日抽成</view>
          <view class="th">操作</view>
        </view>
        <view v-for="m in members" :key="m.id" class="table-row">
          <view class="td main">
            <view class="avatar-col">
              <image class="avatar" :src="m.avatar" />
              <view class="badge-group">
                <view v-if="m.isMe" class="badge self">我</view>
                <view v-if="m.percent" class="badge percent">{{ m.percent }}%</view>
              </view>
            </view>
            <view class="info-col">
              <view class="user-row">
                <view class="nickname">{{ m.nickname }}</view>
                <view class="level-tag" v-if="m.level">{{ m.level }}</view>
              </view>
              <view class="phone">{{ m.phone }}</view>
            </view>
          </view>
          <view class="td bonus">+{{ m.today }}</view>
          <view class="td bonus">+{{ m.yesterday }}</view>
          <view class="td action">
            <button v-if="m.detail" class="plain-btn">明细</button>
            <view v-if="m.levelBtn" class="level-btn" :class="m.level === '二级' ? 'purple' : 'gradient'">{{ m.levelBtn }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const members = ref([
  {
    id: 1,
    isMe: true,
    avatar: '/static/photo.png',
    nickname: '少女骑摩托',
    phone: '131****2222',
    today: 100,
    yesterday: 100,
    detail: true,
    level: '二级',
    levelBtn: '二级'
  },
  {
    id: 2,
    isMe: false,
    avatar: '/static/girl-icon.png',
    nickname: '国服第一',
    phone: '187****2252',
    percent: 80,
    today: 100,
    yesterday: 100,
    levelBtn: '代理'
  },
  {
    id: 3,
    isMe: false,
    avatar: '/static/girl-icon.png',
    nickname: '国服第一',
    phone: '187****2252',
    percent: 80,
    today: 100,
    yesterday: 100,
    levelBtn: '代理'
  },
])
</script>

<style lang="scss" scoped>
.agent-bg {
  background: #f7f7fa;
  min-height: 100vh;
  padding: 0;
}
.content-card {
  margin: 28rpx 14rpx 0 14rpx;
  background: #fff;
  border-radius: 26rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.05);
  padding: 0 0 32rpx 0;
}
.identity-card {
  margin: 32rpx 28rpx 12rpx 28rpx;
  padding: 36rpx 0 28rpx 32rpx;
  border-radius: 21rpx;
  background: linear-gradient(90deg, #a8aefa 0%, #77cefa 100%);
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.identity-left {
  z-index: 2;
}
.card-title {
  font-size: 27rpx;
  margin-bottom: 16rpx;
}
.card-level {
  font-size: 44rpx;
  font-weight: bold;
}
.identity-bg {
  width: 138rpx;
  height: 83rpx;
  position: absolute;
  right: 5rpx;
  top: 16rpx;
  opacity: 0.2;
}

.members {
  margin: 2rpx 8rpx 0 8rpx;
}
.table-head {
  display: flex;
  align-items: center;
  padding: 18rpx 0 15rpx 0;
  font-size: 30rpx;
  color: #191d2c;
  font-weight: bold;
  border-bottom: 2rpx solid #f4f4f8;
}
.th {
  flex: 1;
  &.main { flex: 1.85; }
  text-align: left;
}
.table-row {
  display: flex;
  align-items: center;
  padding: 24rpx 0 22rpx 0;
  border-bottom: 1px solid #f1f2f5;
  &:last-child { border-bottom: none; }
}
.td {
  flex: 1;
  &.main { flex: 1.85; display: flex; align-items: center; }
  &.bonus { color: #2468ff; font-weight: 600; font-size: 27rpx; text-align: left; }
  &.action { text-align: left; }
}
.avatar-col {
  position: relative; margin-right: 16rpx;
}
.avatar {
  width: 68rpx; height: 68rpx; border-radius: 50%; background: #f0f0f0;
}
.badge-group { position: absolute; left: -26rpx; top: -13rpx; display: flex; flex-direction: column; gap: 12rpx; }
.badge {
  min-width: 42rpx; height: 36rpx; display: flex; justify-content: center; align-items: center; font-size: 21rpx;
  font-weight: 500; border-radius: 20rpx; padding: 0 14rpx;
}
.badge.self {
  color: #fff; background: #ffc963; box-shadow: 0 2rpx 8rpx rgba(255,201,99,.11);
}
.badge.percent {
  color: #fb4444; background: #fff; border: 2rpx solid #fb4444;
}
.info-col {
  display: flex; flex-direction: column; align-items: flex-start;
}
.user-row {
  display: flex; align-items: center; gap: 8rpx;
}
.nickname { font-size: 26rpx; color: #23262e; margin-right: 8rpx; }
.level-tag {
  background: linear-gradient(90deg, #b2b8f8,#86cbfa);
  color: #fff;
  font-size: 22rpx;
  border-radius: 24rpx;
  padding: 4rpx 20rpx;
  margin-left: 2rpx;
}
.phone { font-size: 23rpx; color: #767a89; margin-top: 5rpx; }
.plain-btn {
  background: #f3f2f8; border: none; color: #888; font-size: 22rpx;
  border-radius: 18rpx; padding: 0 18rpx; height: 46rpx;
  margin-right: 14rpx;
}
.level-btn {
  display: inline-block;
  min-width: 56rpx;
  text-align:center;
  height: 44rpx;
  font-size: 22rpx;
  font-weight: bold;
  border-radius: 24rpx;
  padding: 0 20rpx;
  background: #f3f2f8;
  color: #9888fa;
  &.purple {
    background: linear-gradient(90deg,#bebdfb,#888ff9);
    color: #fff;
  }
}
</style>
